
import React, { useState, useEffect, useRef } from "react";

import { Table, Pagination, Modal } from 'antd';

import type { TableColumnsType, PaginationProps } from 'antd';
import { matePlace } from "@/common/api"


interface ChildProps {
    data: any
}

const Detail: React.FC<ChildProps> = ({ data }) => {
    const [visible, setVisible] = useState(false)
    const [tableData, setTableData] = useState<any[]>([]);
    useEffect(() => {
        if (data?.id) {
            setVisible(true)
            pageNumRef.current = 1;
            pageSizeRef.current = 10;
            setCurrent(1)
            getData()
        }

    }, [data]);
    const getData = () => {
        let param = {
            sortId: data.id,
            pageSize: pageSizeRef.current,
            pageNum: pageNumRef.current
        }
        matePlace(param).then((res: any) => {
            if (res.success) {
                setTableData(res.data.records)
                total.current = res.data.total
            }
        })
    }
    const handleCancel = () => {
        setVisible(false)
    }

    const columns: TableColumnsType = [
        {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            align: 'center' as const,
            onCell: () => ({ style: { textAlign: 'center' } }),
            render: (_text, _record, index) => index + 1,
        },
        {
            title: '站点名称',
            dataIndex: 'place',
            // width: 100,
        },
        {
            title: '经度',
            dataIndex: 'longitude',
            //  width: 100,
        },
        {
            title: '纬度',
            dataIndex: 'latitude',
            //  width: 100,
        },
    ];

    const total = useRef(0);
    const pageNumRef = useRef(1);
    const pageSizeRef = useRef(10);
    const [current, setCurrent] = useState<number>(1);
    const onChange: PaginationProps['onChange'] = (page, pageSize) => {
        pageNumRef.current = page;
        pageSizeRef.current = pageSize;
        setCurrent(page)
        getData()
    }
    return <>
        <Modal
            title='详情'
            open={visible}
            width="50vw"
            footer={null}
            onCancel={handleCancel}

        >
            <div>
                <Table
                    bordered={true}
                    columns={columns}
                    dataSource={tableData}
                    scroll={{ x: 'max-content' }}
                    pagination={false}
                    sticky={true}
                    style={{ height: '40vh', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}
                />
            </div>
            <div style={{ marginTop: '10px', display: 'flex' }}>
                <Pagination
                    size="small"
                    total={total.current}
                    showSizeChanger
                    showQuickJumper
                    showTotal={(total) => `共 ${total} 条`}
                    onChange={onChange}
                    current={current}
                    style={{ marginLeft: 'auto' }}
                />
            </div>

        </Modal >
    </>
}

export default Detail